.login--container{display: flex;width: 100%;height: 100vh;background-image: url(../img/login_bg_new.png);background-size: cover;background-repeat: no-repeat;background-position: left top;justify-content: flex-end;}
.login--form{width: 100%;max-width: 640px;display: flex;justify-content: center;height: 100%;background-color: #fff;}
.login--form-wrap{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.login--form-home{display: flex;align-items: center;justify-content: center;width:100%;max-width: 98px;}
.login--form input{outline: none !important;}
.login--form-wrap{max-width: 320px;width: 100%;}
.login--form-wrap form{width: 100%;}
.login--form-inputText-title{font-size: 15px;font-weight: 600;margin-bottom: 12px;}
.login--form-inputText{margin-bottom: 20px;position: relative;}
.login--form-inputText input{border: 1px solid;border-color: #dddddd;border-radius: 3px;display: block;width: 100%;padding: 15px;}
.err .login--form-inputText input{border-color: #ff1402;}
.login--form-err .material-symbols-outlined,
.login--form-pwView .material-symbols-outlined{
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.login--form-pwView{position: absolute;right: 12px;bottom: 6px;transform: translate(-50%,-50%);color: #666;cursor:pointer;}
.login--form-pwView span{font-size: 18px;display: block;}
.login--form-pwView .visible{display: none;}
.login--form-pwView .invisible{display: block;}
.login--form-pwView.on .visible{display: block;}
.login--form-pwView.on .invisible{display: none;}

.login--form-submit button{background-color: #000;color: #fff;width: 100%;padding: 19px 10px;border-radius: 4px;font-size: 15px;font-weight: 700;cursor: pointer;}

.login--form-check{margin-top: 16px;display: flex;justify-content: space-between;align-items: center;}
.login--form-check input{opacity: 0;position: absolute;pointer-events: none;}
.login--form-keepLogin{display: flex;align-items: center;font-size: 13px;cursor: pointer;}
.login--form-keepLogin span{display: block;width: 16px;height: 16px;position:relative;margin-right: 8px;border-radius: 3px;border: 1px solid #ddd;}
.login--form-keepLogin.checked span{background-color: #000;}
.login--form-keepLogin.checked span::after{width: 8px;height: 3px;border:solid #fff;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-65%) rotate(135deg);content: '';border-width: 1px 1px 0 0;}

.login--form-findPw{display: flex;align-items: center;}
.login--form-findPw p{font-size: 13px;margin-right: 0px;}
.login--form-findPw span{font-size: 18px;}

.login--pwReset{text-align: center;margin-top: 52px;}
.login--pwReset p{font-size: 13px;color: #666;margin-bottom: 1.5em;}
.login--pwReset a{font-size: 15px;font-weight: 700;border-bottom: 1px solid #000;padding-bottom: 1px;}

.login--form-err{color: #ff1402;font-size: 12px;display: none;margin-bottom: 36px;}
.err .login--form-err{display: flex;}
.login--form-err span{font-size: 14px;margin-right: 2px;}
@media all and (max-width:768px){
    .login--form{padding: 0 20px;}
}